<template>
    <view class="container">
        <view class="uni-back" @click="backToPage">
            <uni-icons type="left" :size="20" color="#fff"></uni-icons>
        </view>
        <image class="top-bg" src="/static/user-top-bg.png"></image>
        <view class="user-info-box">
            <view class="avatar-box">
                <!-- 添加点击事件 -->
                <image class="avatar" :src="userData.avatar" @click="chooseAvatar"></image>
                <view class="edit-box flex-item-center">
                    <image src="/static/edit-icon.png"></image>
                </view>
            </view>
            <view class="name">{{ userInfo.name }}</view>
            <view class="user-info flex-item-center">
                <view class="year-box flex-item-center">
					
                    <image src="/static/sex-icon.png"></image>
                    <view>{{ userInfo.age }}{{ $t('user.age') }}</view>
                </view>
                <view class="uid flex-item-center" :data-uid="userInfo.uid">
                    {{ $t('user.uid') }}:{{ userInfo.uid }}
                    <image src="/static/copy-icon.png" mode="" @click="copyUid($event, userInfo.uid)"></image>
                </view>
            </view>
        </view>
        <view class="list-box">
            <view class="item flex-just-between" @click="toSetting">
                <view class="left">
                    <image src="/static/set-icon.png" mode=""></image>
                    <text>{{ $t('user.setting') }}</text>
                </view>
                <uni-icons type="right" :size="24"></uni-icons>
            </view>
            <view class="item flex-just-between">
                <view class="left">
                    <image src="/static/star-icon.png" mode=""></image>
                    <text>{{ $t('user.rate') }}</text>
                </view>
                <uni-icons type="right" :size="24"></uni-icons>
            </view>
            <view class="item flex-just-between" @click="showShareDailog">
                <view class="left">
                    <image src="/static/friends-icon.png" mode=""></image>
                    <text>{{ $t('user.share') }}</text>
                </view>
                <uni-icons type="right" :size="24"></uni-icons>
            </view>
            <view class="item flex-just-between">
                <view class="left">
                    <image src="/static/feedback-icon.png" mode=""></image>
                    <text>{{ $t('user.feedback') }}</text>
                </view>
                <uni-icons type="right" :size="24"></uni-icons>
            </view>
        </view>

        <!-- 分享 -->
        <uni-popup class="popUpAlert" ref="popup" type="bottom" background-color="#fff" borderRadius="52rpx 52rpx 0 0">
            <view class="popup-content">
                <view class="title">{{ $t('user.shareTitle') }}</view>
                <view class="share-box flex-item-center">
                    <view class="share-item" v-for="(item, index) in shareList" :key="index">
                        <image :src="item.icon"></image>
                        <view>{{ $t(`user.shareChannels.${item.key}`) }}</view>
                    </view>
                </view>
            </view>
        </uni-popup>
    </view>
</template>

<script>
	import memberApi from '@/api/member.js'
	
    export default {
        data() {
            return {
                shareList: [{
                        key: 'facebook',
                        icon: '/static/facebook-icon.png'
                    },
                    {
                        key: 'youtube',
                        icon: '/static/youtube-icon.png'
                    },
                    {
                        key: 'whatsapp',
                        icon: '/static/WhatsAPP-icon.png'
                    },
                    {
                        key: 'instagram',
                        icon: '/static/Instagram-icon.png'
                    }
                ],
                userData: {
                    uid: '8918182392003',
                    age: '20',
					gender: 3, // 1. 男, 2. 女, 3. 保密
                    name: 'Balderstong',
					avatar: '/static/logo.png'
                }
            }
        },
        mounted() {
			memberApi.getUserInfo().then(res => {
				this.userData.uid = res.data.id
				this.userData.age = res.data.age
				this.userData.avatar = res.data.avatar ?? '/static/logo.png'
				this.userData.gender = res.data.gender 
				this.userData.name = res.data.username
			})
		},
        computed: {
            userInfo() {
                return this.userData || {}
            }
        },
        methods: {
            backToPage() {
                uni.navigateBack({
                    delta: 1
                })
            },
            toSetting() {
                uni.navigateTo({
                    url: '/pages/my/notification/notification'
                })
            },
            showShareDailog() {
                this.$refs.popup.open()
            },
            copyUid(e, uid) {
                e.stopPropagation()

                uni.setClipboardData({
                    data: uid,
                    success: () => {
                        uni.showToast({
                            title: this.$t('user.copySuccess'),
                            icon: 'success'
                        })
                    },
                    fail: () => {
                        uni.showToast({
                            title: this.$t('user.copyFailed'),
                            icon: 'none'
                        })
                    }
                })
            },
            // 新增：选择头像方法
            chooseAvatar() {
                uni.chooseImage({
                    count: 1,
                    sizeType: ['compressed'],
                    sourceType: ['album', 'camera'],
                    success: (res) => {
                        console.log('选择图片成功', res);
                        // 更新头像URL
                        this.userData.avatar = res.tempFilePaths[0];
                        
                        // 如果需要上传到服务器，这里可以调用上传接口
                        // this.uploadAvatar(res.tempFilePaths[0]);
                        
                        uni.showToast({
                            title: '头像已更新',
                            icon: 'success'
                        });
                    },
                    fail: (err) => {
                        console.log('选择图片失败', err);
                        if (err.errMsg !== 'chooseImage:fail cancel') {
                            uni.showToast({
                                title: '选择图片失败',
                                icon: 'none'
                            });
                        }
                    }
                });
            },
            // 如果需要上传到服务器，可以实现这个方法
            uploadAvatar(filePath) {
                uni.uploadFile({
                    url: 'https://your-api.com/upload/avatar', // 替换为实际的上传接口
                    filePath: filePath,
                    name: 'avatar',
                    success: (res) => {
                        console.log('上传成功', res);
                        // 处理上传成功的响应
                    },
                    fail: (err) => {
                        console.log('上传失败', err);
                        uni.showToast({
                            title: '上传失败，请重试',
                            icon: 'none'
                        });
                    }
                });
            }
        }
    }
</script>

<style lang="less" scoped>
	.container {
		.uni-back {
			position: absolute;
			top: 22rpx;
			left: 40rpx;
			width: 52rpx;
			height: 52rpx;
			background-color: rgba(255, 255, 255, 0.1);
			backdrop-filter: blur(10px);
			border-radius: 50%;
			display: flex;
			align-items: center;
			justify-content: center;
			z-index: 3;
		}

		.top-bg {
			width: 100%;
			height: 426rpx;
			border-radius: 0 0 100rpx 100rpx;
		}

		.user-info-box {
			margin-top: -112rpx;

			.avatar-box {
				margin: 0 auto 12rpx;
				display: block;
				width: 166rpx;
				height: 166rpx;
				position: relative;

				.avatar {
					width: 100%;
					height: 100%;
					border-radius: 50%;
				}

				.edit-box {
					position: absolute;
					right: 14rpx;
					bottom: -6rpx;
					width: 36rpx;
					height: 36rpx;
					background: #FFFFFF;
					box-shadow: 0rpx 0rpx 8rpx 0rpx rgba(180, 180, 180, 0.5);
					border-radius: 50%;
					justify-content: center;

					image {
						width: 20rpx;
						height: 20rpx;
					}
				}
			}

			.name {
				margin-bottom: 12rpx;
				text-align: center;
				font-size: 40rpx;
				font-weight: bold;
			}

			.user-info {
				justify-content: center;
				font-size: 20rpx;
				color: #999;
			}

			.year-box,
			.uid {
				height: 40rpx;
				padding: 0 14rpx;
				background-color: #eee;
				border-radius: 20rpx;

				image {
					margin-right: 24rpx;
					height: 24rpx;
					width: 24rpx;
				}

				view {
					position: relative;

					&::before {
						content: '';
						position: absolute;
						top: 5rpx;
						left: -12rpx;
						width: 2rpx;
						height: 22rpx;
						background-color: #979797;
					}
				}
			}

			.uid {
				margin-left: 12rpx;
				padding: 0 20rpx;

				image {
					margin: 0 0 0 18rpx;
					width: 20rpx;
					height: 20rpx;
				}

			}
		}

		.list-box {
			margin-top: 80rpx;
			padding: 0 52rpx;

			.item {
				height: 110rpx;
				font-size: 32rpx;
				.left{
					display: flex;
					align-items: center;
				}
				image {
					margin-right: 30rpx;
					display: block;
					border: 0;
					width: 36rpx;
					height: 36rpx;
				}
			}
		}

		.popup-content {
			padding: 40rpx 0;
			text-align: center;
			height: 370rpx;

			.title {
				margin-bottom: 86rpx;
				font-size: 32rpx;
			}

			.share-box {
				padding: 0 52rpx;
				font-size: 24rpx;
			}

			.share-item {
				margin-right: 70rpx;

				&:nth-child(4n) {
					margin-right: 0;
				}

				image {
					margin: 0 auto 18rpx;
					display: block;
					border: 0;
					width: 72rpx;
					height: 72rpx;
				}
			}
		}
	}
</style>